<template>
  <div class="table-main">
    <div class="title">
      <div class="presuffix" />
      {{ layerData.name }}
      <div class="total" v-text="tableData.length" />
      <div style="width: 50px;" />
      <img :src="icons.closeIcon" @click="closeDialog" class="close">
    </div>

    <el-table
      class="content"
      :data="tableData"
      :header-cell-style="{ background: '#283442' }"
      table-layout="auto"
      height="400"
      :border="true"
    >

      <el-table-column
        :label="head.fieldCh"
        v-for="(head, index) in tableHead"
        :key="index"
        align="center"
        :width="widthData[index]"
      >
        <template #default="scope">
          <div class="detail">
            {{ tableData[scope.$index][head.fieldEn] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100"
        v-if="tableHead && tableHead.length > 0"
      >
        <template #default="scope">
          <div class="detail" @click="toDetail(tableData[scope.$index])">
            <el-icon>
              <Document />
            </el-icon>
            详情
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" />
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch, onMounted } from 'vue'
import closeIcon from '@/assets/dialog/warn_close.svg'
import { useStore } from '@/store'
import Request from '@/utils/request'
import { findApiOutListById } from '@/api/mapConfig'
import { ElIcon } from 'element-plus'

const icons = ref({
  closeIcon: closeIcon
})
const emit = defineEmits(['closeTableDialog', 'clickToDetail'])
const store = useStore()
const currentAreaCode = ref('') // 当前选中行政区划code 默认最大级code

const props = defineProps({
  layerData: {
    type: Object,
    default: () => { }
  }
})
// 表头
const tableHead = ref([] as any)
// table主要数据
const tableData = ref([] as any)
// 宽度容器
const widthData = ref([] as any)
// 关闭弹窗
const closeDialog = () => {
  emit('closeTableDialog')
}
const layerData = computed(() => props.layerData)
// 点击去详情
const toDetail = (item: any) => {
  item.elementType = layerData.value.elementType
  item.elementName = layerData.value.elementName
  emit('clickToDetail', item, layerData.value.id)
}
watch(layerData, () => {
  getMapDataByUrl()
  findOutById(layerData.value.id)
}, {
  deep: true
})
// 获取指定图层数据
const getMapDataByUrl = async () => {
  const params = {
    xzqhdm: currentAreaCode.value.replace(/(0+)$/g, '')
  }
  const data = await Request({
    url: layerData.value.apiDO.url,
    method: 'GET',
    params
  })
  tableData.value = data
}
// 通过id获取出参
const findOutById = async (id: any) => {
  const outData = await findApiOutListById(id)
  tableHead.value = outData.filter((item: any) => item.isList === '1')
  calColWidth()
}
// 计算table每一列的宽度
const calColWidth = () => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  // context?.font = '12px'
  let maxWidth = 0 as any
  for (let headIndex = 0; headIndex < tableHead.value.length; headIndex++) {
    maxWidth = context?.measureText(tableHead.value[headIndex].fieldCh).width
    for (let i = 0; i < tableData.value.length; i++) {
      const temp = Number(context?.measureText(tableData.value[i][tableHead.value[headIndex].fieldEn]).width)
      if (maxWidth < temp) {
        maxWidth = temp
      }
    }
    widthData.value.push(maxWidth + 24)
  }
}

onMounted(async () => {
  const areaList = store.getters.getAreaList // 行政区划树结构
  currentAreaCode.value = areaList[0].code
  if (layerData.value) {
    await getMapDataByUrl()
    findOutById(layerData.value.id)
  }
})
</script>
<style lang="scss" scoped>
.table-main {
  height: auto;
  display: flex;
  flex-direction: column;
  background: #242D3A;

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 14px;
    background: #283442;

    .presuffix {
      width: 3px;
      height: 20px;
      border-radius: 0px 3px 3px 0px;
      background: #E6A23C;
      margin: 0 12px;
    }

    .total {
      font-size: 12px;
      color: #8291A9;
      margin: auto 12px;
    }

    .close {
      width: 18px;
      height: 18px;
      margin-left: auto;
      margin-right: 12px;
    }
  }

  &:deep(.el-table) {
    --el-table-tr-bg-color: #1F2935;
    --el-fill-color-lighter: #242D3A;
    --el-table-row-hover-bg-color: #1F2935;
    --el-table-border-color: #343f4d;
    --el-table-border: 1px solid #343f4d;

    thead tr th {
      position: sticky;
      top: 0;
      z-index: 3;
    }

    .el-scrollbar__wrap {
      overflow: auto;
      height: 500px;
    }

    .el-table__header-wrapper tr td.el-table-fixed-column--left,
    .el-table__header-wrapper tr td.el-table-fixed-column--right,
    .el-table__header-wrapper tr th.el-table-fixed-column--left,
    .el-table__header-wrapper tr th.el-table-fixed-column--right,
    .el-table__body-wrapper tr td.el-table-fixed-column--left,
    .el-table__body-wrapper tr td.el-table-fixed-column--right,
    .el-table__body-wrapper tr th.el-table-fixed-column--left,
    .el-table__body-wrapper tr th.el-table-fixed-column--right,
    .el-table__footer-wrapper tr td.el-table-fixed-column--left,
    .el-table__footer-wrapper tr td.el-table-fixed-column--right,
    .el-table__footer-wrapper tr th.el-table-fixed-column--left,
    .el-table__footer-wrapper tr th.el-table-fixed-column--right {
      background: #242D3A;
    }

    .cell {
      display: inline-block;
      white-space: nowrap;
      width: auto;
      overflow: auto;
    }

    .detail {
      cursor: pointer;
    }
  }

  &:deep(.el-table tr) {
    background-color: #1F2935;
  }

  &:deep(.el-table tr:hover) {
    color: #E6A23C;
  }

  .content {
    width: auto;
    max-width: 500px;
    margin: 10px;
    margin-top: 7px;
    box-sizing: border-box;
  }

  .bottom {
    height: 19px;
    background-color: #283442;
  }
}
</style>
